<template>
  <view>
    <!-- 选择收货地址的盒子 -->
    <view class="shipment" v-if="JSON.stringify(address) == '{}'" @click="chooseAddressDemo">
      <view class="address"> 请选择收货地址 </view>
      <uni-icons type="right" size="20" class="icon"></uni-icons>
    </view>

    <!-- 渲染收货信息的盒子 -->
    <view class="shipment" v-else @click="chooseAddressDemo">

      <view class="user">{{address.userName}} {{address.telNumber}}</view>
      <view class="address">{{addstr}} </view>
      <uni-icons type="right" size="20" class="icon"></uni-icons>
    </view>
  </view>
</template>

<script>
  // 按需导入 mapState 和 mapMutations 这两个辅助函数
  import {
    mapState,
    mapMutations,
    mapGetters
  } from 'vuex'

  export default {
    name: "my-address",
    data() {
      return {

      };
    },

    methods: {
      ...mapMutations('m_user', ['updateAddress']),
      // 选择收货地址
      chooseAddressDemo() {
        // 1. 调用小程序提供的 chooseAddress() 方法，即可使用选择收货地址的功能
        uni.chooseAddress({
          success: (res) => {
            this.updateAddress(res)
          }
        })

      }
    },
    computed: {
      //把 m_user 模块中的 address 对象映射当前组件中使用，代替 data 中address 对象
      ...mapState('m_user', ['address']),
      ...mapGetters('m_user', ['addstr'])

    },
  }
</script>

<style lang="scss">
  .shipment {
    margin: 20rpx;
    padding: 30rpx 30rpx 30rpx 84rpx;
    font-size: 26rpx;
    border-radius: 10rpx;
    background: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png) 20rpx center/50rpx no-repeat #fff;
    position: relative;
  }
  .shipment .icon {
    font-size: 36rpx;
    color: #333;
    transform: translateY(-50%);
    position: absolute;
    top: 50%;
    right: 20rpx;
  }
  .shipment .user {
    color: #333;
    margin-bottom: 5rpx;
  }
  .shipment .address {
    color: #666;
  }
  
  // 底部边框线的样式
  .address-border {
    display: block;
    width: 100%;
    height: 5px;
  }

  // 选择收货地址的盒子
  .address-choose-box {
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  // 渲染收货信息的盒子
  .address-info-box {
    font-size: 12px;
    height: 90px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 5px;

    // 第一行
    .row1 {
      display: flex;
      justify-content: space-between;

      .row1-right {
        display: flex;
        align-items: center;

        .phone {
          margin-right: 5px;
        }
      }
    }

    // 第二行
    .row2 {
      display: flex;
      align-items: center;
      margin-top: 10px;

      .row2-left {
        white-space: nowrap;
      }
    }
  }
</style>